<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
      @click="pageAdvertisementRecordList"></el-button>
    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
      <el-button slot="append" icon="el-icon-search" @click="pageAdvertisementRecordList"></el-button>
    </el-input>
    <el-button style="margin:10px" @click="reSetting">重置</el-button>
    <!-- 表格
      data 展示数据 —— 数组类型
    -->
    <el-table style="width: 100%;" border :data="list">
      <!--     <el-table-column
            type="selection"
            width="55">
          </el-table-column> -->
      <el-table-column prop="id" label="id" width="80" align="center">
      </el-table-column>
      <el-table-column prop="createId" label="购买者id" width="80" align="center">
      </el-table-column>
      <el-table-column prop="orderId" label="订单号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="title" label="广告标题" width="100" align="center">
      </el-table-column>
      <!--  <el-table-column prop="city" label="投放城市" align="center">
      </el-table-column> -->
      <!-- <el-table-column prop="linkUrl" label="链接地址" align="center">
      </el-table-column> -->
      <el-table-column label="链接地址" align="center">
        <template slot-scope="scope">
          <a :href="scope.row.linkUrl" target="_blank" style="color: blue;">
            {{ scope.row.linkUrl }}
          </a>
        </template>
      </el-table-column>
      <el-table-column label="链接内容图片" align="center">
        <template slot-scope="{ row, $index }" v-if="row.picUrl">
          <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + row.picUrl"
            :preview-src-list="[$staticURL + row.picUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="投放开始时间" align="center" :formatter="dateFormat">
      </el-table-column>
      <el-table-column prop="endTime" label="投放结束时间" align="center" :formatter="dateFormat1">
      </el-table-column>

      <!--   <el-table-column prop="estimateExposureNum" label="预计曝光量" align="center">
      </el-table-column>
      <el-table-column prop="realityExposureNum" label="实际曝光量" align="center">
      </el-table-column> -->
      <el-table-column prop="costMoney" label="花费金额(元)" align="center">
      </el-table-column>
      <el-table-column prop="type" label="广告类型" align="center">
        <template slot-scope="{ row, $index }">
          <!-- <div>{{ row.type == "1" ? '用户广告' : '商业广告' }}</div> -->
          <p v-if="row.type == 1">用户广告</p>
          <p v-else-if="row.type == 2">开屏广告</p>
          <p v-else>视频广告</p>
        </template>
      </el-table-column>
      <el-table-column prop="isPay" label="是否支付" align="center">
        <template slot-scope="{ row, $index }">
          <div>{{ row.isPay == "1" ? '是' : '否' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="受众范围" align="center" width="100">
        <template slot-scope="{ row, $index }">
          <p v-if="row.sexType == 0">所有人</p>
          <p v-else-if="row.sexType == 1">男</p>
          <p v-else>女</p>
        </template>
      </el-table-column>
      <!-- <el-table-column label="投放状态" align="center" width="100"
        :filters="[{ text: '待投放', value: '0' }, { text: '投放中', value: '1' }, { text: '投放结束', value: '2' }]"
        :filter-method="filterTag" filter-placement="bottom-end">
        <template slot-scope="{ row, $index }">
          <p v-if="row.putStatus == 0">待投放</p>
          <p v-else-if="row.putStatus == 1">投放中</p>
          <p v-else>投放结束</p>
        </template>
      </el-table-column> -->
      <el-table-column label="投放状态" align="center" width="100">
        <template slot-scope="{ row, $index }">
          <template v-if="row.putStatus == 2 && auditTime(row.extensionStartTime, row.extensionEndTime) == 1">
            <p>暂停投放</p>
          </template>
          <template v-else>
            <p v-if="auditTime(row.extensionStartTime, row.extensionEndTime) == 0">待投放</p>
            <p v-else-if="auditTime(row.extensionStartTime, row.extensionEndTime) == 1">投放中</p>
            <p v-else>投放结束</p>
          </template>
        </template>
      </el-table-column>
      <!--    <el-table-column label="图片" align="center">
        <template slot-scope="{ row, $index }">
          <el-image v-for="item in row.picUrl" :key="item" style="width: 40px; height: 40px; margin-right: 5px;"
            :src="item" :preview-src-list="row.picUrl">
          </el-image>
        </template>
      </el-table-column> -->
      <el-table-column label="广告图片" align="center">
        <template slot-scope="{ row, $index }">
          <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + row.fileUrl"
            v-if="row.fileType == 1" :preview-src-list="[$staticURL + row.fileUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="广告视频" align="center">
        <template slot-scope="{ row, $index }" v-if="row.fileType == 2">
          <video :src="'https://www.yushiai.com.cn/' + row.fileUrl" controls="controls"
            style="width:60px;height:60px;"></video>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上传时间" align="center" width="100">
      </el-table-column>

      <el-table-column label="审核结果" align="center" width="100"
        :filters="[{ text: '审核驳回', value: '-1' }, { text: '未审核', value: '0' }, { text: '审核通过', value: '1' }]"
        :filter-method="filterTag" filter-placement="bottom-end">
        <template slot-scope="{ row, $index }">
          <p v-if="row.status == -1">审核驳回</p>
          <p v-else-if="row.status == 0">未审核</p>
          <p v-else>审核通过</p>
        </template>
      </el-table-column>
      <el-table-column label="驳回原因" align="center">
        <template slot-scope="{ row, $index }">
          <p v-if="row.status == -1">{{ row.auditResult }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="{ row, $index }">
          <template v-if="row.status == 0">
            <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
            <el-popconfirm title="是否通过审核？" icon="el-icon-info" icon-color="red" @confirm="getPassDynamic(row.id)">
              <el-tooltip content="通过审核" placement="top" slot="reference">
                <el-button type="success" icon="el-icon-check"></el-button>
              </el-tooltip>
            </el-popconfirm>
            <el-popconfirm style="margin-left:10px" title="是否驳回？" icon="el-icon-info" icon-color="red"
              @confirm="getRejectDynamic(row.id)">
              <el-tooltip content="驳回" placement="top" slot="reference">
                <el-button type="danger" icon="el-icon-close"></el-button>
              </el-tooltip>
            </el-popconfirm>
          </template>
          <template
            v-if="row.status == 1 && row.putStatus != 2 && auditTime(row.extensionStartTime, row.extensionEndTime) == 1">
            <el-popconfirm style="margin-left:10px" title="是否中断该广告？" icon="el-icon-info" icon-color="red"
              @confirm="stopRecord(row.id)">
              <el-tooltip content="中断广告" placement="top" slot="reference">
                <el-button type="danger" icon="el-icon-video-pause"></el-button>
              </el-tooltip>
            </el-popconfirm>
          </template>

          <template v-if="row.putStatus == 2 && auditTime(row.extensionStartTime, row.extensionEndTime) == 1">
            <el-popconfirm style="margin-left:10px" title="是否继续投放该广告？" icon="el-icon-info" icon-color="red"
              @confirm="restoreRecord(row.id)">
              <el-tooltip content="继续投放" placement="top" slot="reference">
                <el-button type="danger" icon="el-icon-video-play"></el-button>
              </el-tooltip>
            </el-popconfirm>
          </template>

        </template>

      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination style="margin-top:20px;text-align:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'AgentAdvAudit',
  mounted() {
    //获取列表数据方法
    this.pageAdvertisementRecordList()
  },
  data() {
    return {
      //页码
      pageNumber: 1,
      //每页数量
      pageSize: 10,
      //总条数
      total: 0,
      //列表数据
      list: [],
      // ids:[],
      //搜索
      searchText: '',
    }
  },
  computed: {
    auditTime: () => {
      return (timestamp, timestamp1) =>
        timestamp - Date.parse(new Date()) / 1000 > 0 ?
          "0" :
          timestamp1 - Date.parse(new Date()) / 1000 < 0 ?
            "2" :
            "1";
    },
  },
  methods: {
    //时间格式化
    dateFormat(row) {
      if (row.extensionStartTime) {
        return moment(row.extensionStartTime * 1000).format("YYYY-MM-DD");
      }
      // return moment(row.startTime * 1000).format("YYYY-MM-DD HH:mm:ss");
    },
    dateFormat1(row) {
      if (row.extensionEndTime) {
        return moment(row.extensionEndTime * 1000).format("YYYY-MM-DD");
      }

    },
    //      handleSelectionChange(val){
    //        console.log(val)
    //        this.ids = val.map((item, index) => {
    // 						return item.id;
    // 					}).join(",");
    //           console.log(this.ids)

    //      },
    async pageAdvertisementRecordList() {
      console.log(this.searchText, 'listlist');
      let res = await this.$API.audit.pageAdvertisementRecordList({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        searchText: this.searchText
      })


      this.list = res.data.rows

    },
    reSetting() {
      this.searchText = '';
      this.pageAdvertisementRecordList();
    },
    async getPassDynamic(id) {
      let res = await this.$API.audit.passAdvertisementRecordList({
        recordId: id
      })
      this.pageAdvertisementRecordList()
    },
    async getRejectDynamic(id) {
      let auditResult = prompt('驳回原因：');
      if (auditResult != null && auditResult != "") {
        let res = await this.$API.audit.rejectAdvertisementRecordList({
          recordId: id,
          auditResult: auditResult
        })
        this.pageAdvertisementRecordList()
      }
    },


    // 继续投放
    async restoreRecord(id) {
      let res = await this.$API.audit.restoreRecord({
        recordId: id
      })
      this.pageAdvertisementRecordList()
    },
    // 暂停投放
    async stopRecord(id) {
      let auditResult = prompt('驳回原因：');
      if (auditResult != null && auditResult != "") {
        let res = await this.$API.audit.stopRecord({
          recordId: id,
          auditResult: auditResult
        })
        this.pageAdvertisementRecordList()
      }
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.pageAdvertisementRecordList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val
      this.pageAdvertisementRecordList()
    },
    filterTag(value, row) {
      console.log(value, row, 'user信息')
      return row.status == value;
    },
    filterHandler(value, row, column) {
      // const property = column['property'];
      // return row[property] === value;
    }
  }
}
</script>

<style></style>
